<script>
import { Modal } from 'bootstrap'

export default {
  name: "MultiStepProgress",
  methods: {
    addStep(name) {
      let stepState = {name: name, percent: 0, desc: undefined};
      this.steps.push(stepState);
      this.namesToSteps.set(name, stepState);
    },
    setPercent(stepName, percent, desc) {
      let step = this.namesToSteps.get(stepName);
      step.percent = percent;
      step.desc = desc;
    },
    show() {
      this.handle = new Modal('#progressModal', {});
      this.handle.show();
    },
    close() {
      this.handle.hide();
      this.handle = undefined;
    },
    clear() {
      this.steps = [];
      this.namesToSteps.clear();
      this.handle = undefined;
    },
  },
  data() {
    return {
      steps: [],
      namesToSteps: new Map(),
      handle: undefined
    }
  }
}
</script>

<template>
  <div class="modal" id="progressModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="staticBackdropLabel">Loading progress</h1>
          <!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -->
        </div>
        <div class="modal-body">
          <div>
            <p v-for="pro in steps">{{ pro.name }}: {{ (pro.percent * 100).toFixed(2) }}%, loaded bytes: {{ pro.desc || '' }}</p>
          </div>
        </div>
        <!--
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Understood</button>
        </div>
        -->
      </div>
    </div>
  </div>

</template>
